<form class="form-horizontal" name="scheduleForm">
  <div class="col-sm-12 form-section-title">
    Information
  </div>
  <div class="form-group">
    <span class="col-sm-12 text-muted small">
      <p>
        <i class="fa fa-exclamation-triangle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i> Due to how schedules behave differently on Edge endpoints and other
        endpoints it is recommended to create specific schedules that will only target one type of endpoint.
      </p>
    </span>
  </div>
  <div class="col-sm-12 form-section-title">
    Schedule configuration
  </div>
  <!-- name-input -->
  <div class="form-group">
    <label for="schedule_name" class="col-sm-1 control-label text-left">Name</label>
    <div class="col-sm-11">
      <input type="text" class="form-control" ng-model="$ctrl.model.Name" id="schedule_name" name="schedule_name" placeholder="backup-app-prod" required auto-focus />
    </div>
  </div>
  <div class="form-group" ng-show="scheduleForm.schedule_name.$invalid">
    <div class="col-sm-12 small text-warning">
      <div ng-messages="scheduleForm.schedule_name.$error">
        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
      </div>
    </div>
  </div>
  <!-- !name-input -->
  <!-- cron-input -->
  <!-- schedule-method-select -->
  <div class="col-sm-12 form-section-title">
    Schedule configuration
  </div>
  <div class="form-group"></div>
  <div class="form-group" style="margin-bottom: 0;">
    <div class="boxselector_wrapper">
      <div>
        <input type="radio" id="config_basic" ng-model="$ctrl.formValues.cronMethod" value="basic" />
        <label for="config_basic">
          <div class="boxselector_header">
            <i class="fa fa-calendar-alt" aria-hidden="true" style="margin-right: 2px;"></i>
            Basic configuration
          </div>
          <p>Select date from calendar</p>
        </label>
      </div>
      <div>
        <input type="radio" id="config_advanced" ng-model="$ctrl.formValues.cronMethod" value="advanced" />
        <label for="config_advanced">
          <div class="boxselector_header">
            <i class="fa fa-edit" aria-hidden="true" style="margin-right: 2px;"></i>
            Advanced configuration
          </div>
          <p>Write your own cron rule</p>
        </label>
      </div>
    </div>
  </div>
  <!-- !schedule-method-select -->
  <!-- basic-schedule -->
  <div ng-if="$ctrl.formValues.cronMethod === 'basic'">
    <div class="form-group">
      <label for="recurring" class="col-sm-2 control-label text-left">Recurring schedule</label>
      <div class="col-sm-10">
        <label class="switch" style="margin-left: 20px;"> <input type="checkbox" name="recurring" ng-model="$ctrl.model.Recurring" /><i></i> </label>
      </div>
    </div>
    <!-- not-recurring -->
    <div ng-if="!$ctrl.model.Recurring">
      <div class="form-group">
        <label for="schedule_cron" class="col-sm-2 control-label text-left">Schedule date</label>
        <div class="col-sm-10">
          <input class="form-control" moment-picker ng-model="$ctrl.formValues.datetime" format="YYYY-MM-DD HH:mm" />
        </div>
        <div ng-show="scheduleForm.datepicker.$invalid">
          <div class="col-sm-12 small text-warning">
            <div ng-messages="scheduleForm.datepicker.$error">
              <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- !not-recurring -->
    <!-- recurring -->
    <div ng-if="$ctrl.model.Recurring">
      <div class="form-group">
        <label for="schedule_value" class="col-sm-2 control-label text-left">Schedule time</label>
        <div class="col-sm-10">
          <select
            id="schedule_value"
            name="schedule_value"
            class="form-control"
            ng-model="$ctrl.formValues.scheduleValue"
            ng-options="value.displayed for value in $ctrl.scheduleValues"
            required
          ></select>
        </div>
        <div ng-show="scheduleForm.schedule_value.$invalid">
          <div class="col-sm-12 small text-warning">
            <div ng-messages="scheduleForm.schedule_value.$error">
              <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- !recurring -->
  </div>
  <!-- !basic-schedule -->
  <!-- advanced-schedule -->
  <div ng-if="$ctrl.formValues.cronMethod === 'advanced'">
    <div class="form-group">
      <label for="schedule_cron" class="col-sm-2 control-label text-left">Cron rule</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" ng-model="$ctrl.model.CronExpression" id="schedule_cron" name="schedule_cron" placeholder="0 2 * * *" required />
      </div>
    </div>
    <div class="form-group" ng-show="scheduleForm.schedule_cron.$invalid">
      <div class="col-sm-12 small text-warning">
        <div ng-messages="scheduleForm.schedule_cron.$error">
          <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
        </div>
      </div>
    </div>
    <div class="form-group">
      <span class="col-sm-12 text-muted small">
        <p>
          You can refer to the <a href="https://godoc.org/github.com/robfig/cron#hdr-CRON_Expression_Format" target="_blank">following documentation</a> to get more information
          about the supported cron expression format.
        </p>
        <p>
          <i class="fa fa-exclamation-triangle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i> Edge endpoint schedules are managed by <code>cron</code> on the
          underlying host. You need to use a valid cron expression that is different from the documentation above.
        </p>
      </span>
    </div>
  </div>
  <!-- !advanced-schedule -->
  <!-- !cron-input -->
  <div class="col-sm-12 form-section-title">
    Job configuration
  </div>
  <div class="form-group">
    <span class="col-sm-12 text-muted small">
      <p> <i class="fa fa-exclamation-triangle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i> This configuration will be ignored for Edge endpoint schedules. </p>
    </span>
  </div>
  <!-- image-input -->
  <div class="form-group">
    <label for="schedule_image" class="col-sm-2 control-label text-left">Image</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" ng-model="$ctrl.model.Job.Image" id="schedule_image" name="schedule_image" placeholder="e.g. ubuntu:latest" required />
    </div>
  </div>
  <div class="form-group" ng-show="scheduleForm.schedule_image.$invalid">
    <div class="col-sm-12 small text-warning">
      <div ng-messages="scheduleForm.schedule_image.$error">
        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
      </div>
    </div>
  </div>
  <!-- !image-input -->
  <!-- retry-policy -->
  <div class="form-group">
    <label for="retrycount" class="col-sm-2 control-label text-left">
      Retry count
      <portainer-tooltip position="bottom" message="Number of retries when it's not possible to reach the endpoint."></portainer-tooltip>
    </label>
    <div class="col-sm-10 col-md-4">
      <input type="number" class="form-control" ng-model="$ctrl.model.Job.RetryCount" id="retrycount" name="retrycount" placeholder="3" />
    </div>
    <label for="retryinterval" class="col-sm-2 control-label text-left">
      Retry interval
      <portainer-tooltip position="bottom" message="Retry interval in seconds."></portainer-tooltip>
    </label>
    <div class="col-sm-10 col-md-4">
      <input type="number" class="form-control" ng-model="$ctrl.model.Job.RetryInterval" id="retryinterval" name="retryinterval" placeholder="30" />
    </div>
  </div>
  <!-- !retry-policy -->
  <!-- execution-method -->
  <div ng-if="!$ctrl.model.Id">
    <div class="col-sm-12 form-section-title">
      Job content
    </div>
    <div class="form-group"></div>
    <div class="form-group" style="margin-bottom: 0;">
      <div class="boxselector_wrapper">
        <div>
          <input type="radio" id="method_editor" ng-model="$ctrl.model.Job.Method" value="editor" />
          <label for="method_editor">
            <div class="boxselector_header">
              <i class="fa fa-edit" aria-hidden="true" style="margin-right: 2px;"></i>
              Web editor
            </div>
            <p>Use our Web editor</p>
          </label>
        </div>
        <div>
          <input type="radio" id="method_upload" ng-model="$ctrl.model.Job.Method" value="upload" />
          <label for="method_upload">
            <div class="boxselector_header">
              <i class="fa fa-upload" aria-hidden="true" style="margin-right: 2px;"></i>
              Upload
            </div>
            <p>Upload from your computer</p>
          </label>
        </div>
      </div>
    </div>
  </div>
  <!-- !execution-method -->
  <!-- web-editor -->
  <div ng-show="$ctrl.model.Job.Method === 'editor'">
    <div class="col-sm-12 form-section-title">
      Web editor
    </div>
    <div class="form-group">
      <span class="col-sm-12 text-muted small">
        <p>
          This schedule will be executed via a privileged container on the target hosts. You can access the host filesystem under the
          <code>/host</code> folder.
        </p>
        <p>
          <i class="fa fa-exclamation-triangle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i> Edge endpoint schedules are managed by <code>cron</code> on the
          underlying host. You have full access to the filesystem without having to use the <code>/host</code> folder.
        </p>
      </span>
    </div>
    <div class="form-group">
      <div class="col-sm-12">
        <code-editor
          identifier="execute-schedule-editor"
          placeholder="# Define or paste the content of your script file here"
          on-change="($ctrl.editorUpdate)"
          value="$ctrl.model.Job.FileContent"
        ></code-editor>
      </div>
    </div>
  </div>
  <!-- !web-editor -->
  <!-- upload -->
  <div ng-show="$ctrl.model.Job.Method === 'upload'">
    <div class="col-sm-12 form-section-title">
      Upload
    </div>
    <div class="form-group">
      <span class="col-sm-12 text-muted small">
        You can upload a script file from your computer.
      </span>
    </div>
    <div class="form-group">
      <div class="col-sm-12">
        <button class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.model.Job.File">Select file</button>
        <span style="margin-left: 5px;">
          {{ $ctrl.model.Job.File.name }}
          <i class="fa fa-times red-icon" ng-if="!$ctrl.model.Job.File" aria-hidden="true"></i>
        </span>
      </div>
    </div>
  </div>
  <!-- !upload -->
  <div class="col-sm-12 form-section-title">
    Target endpoints
  </div>
  <!-- node-selection -->
  <multi-endpoint-selector
    ng-if="$ctrl.endpoints && $ctrl.groups && $ctrl.tags"
    style="margin-top: 55px; display: block;"
    model="$ctrl.model.Job.Endpoints"
    endpoints="$ctrl.endpoints"
    groups="$ctrl.groups"
    tags="$ctrl.tags"
  ></multi-endpoint-selector>
  <!-- !node-selection -->
  <!-- actions -->
  <div class="col-sm-12 form-section-title">
    Actions
  </div>
  <div class="form-group">
    <div class="col-sm-12">
      <button
        type="button"
        class="btn btn-primary btn-sm"
        ng-disabled="$ctrl.actionInProgress || !scheduleForm.$valid
        || $ctrl.model.Job.Endpoints.length === 0
        || ($ctrl.model.Job.Method === 'upload' && !$ctrl.model.Job.File)"
        ng-click="$ctrl.action()"
        button-spinner="$ctrl.actionInProgress"
      >
        <span ng-hide="$ctrl.actionInProgress">{{ $ctrl.formActionLabel }}</span>
        <span ng-show="$ctrl.actionInProgress">In progress...</span>
      </button>
      <span class="text-danger" ng-if="$ctrl.state.formValidationError" style="margin-left: 5px;">
        {{ $ctrl.state.formValidationError }}
      </span>
    </div>
  </div>
  <!-- !actions -->
</form>
